<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            const childs = document.getElementById('accordionSidebar').children;
            let child;
            for (const i in childs) {
                child = childs[i]
                if (child.nodeName == 'LI') {
                    child.onclick = function () {
                        for (let n = this.parentNode.firstChild; n; n = n.nextSibling) {
                            if (n.nodeName == 'LI' && n !== this) {
                                n.className = 'nav-item'
                            }
                        }
                        this.className = 'nav-item active'
                        document.getElementsByTagName('iframe')[0].src = this.attributes[1].nodeValue
                    }
                }
            }
        })

        function user_logout() {
            $.post('/user_logout/', {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'username': '{{ username }}'
            }, function (res) {
                if (res['result'] === 'ok') {
                    {#alert('succeed')#}
                    $.get('/function/delete_service?username={{ username }}',function (res){
                        if(res['succeed']){
                            window.location.href="/"
                        }else{
                            alert('delte service service-{{ username }} failed')
                        }
                    })
                } else {
                    alert('failed')
                }
            })
        }
    </script>

</head>

<body id="page-top">
<div id="wrapper">
    <!-- Sidebar -->
    <ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="">
            {#            <div class="sidebar-brand-icon">#}
            {#                <img src="/static/img/logo/logo2.png">#}
            {#            </div>#}
            {#            <div class="sidebar-brand-text mx-3">Serverless Platform</div>#}
            Serverless Platform
        </a>
        <hr class="sidebar-divider my-0">
        <li class="nav-item active" value="/function/get_dashboard_for_special_function_page?username={{ username }}&selected_function_name=">
            <a class="nav-link" href="#">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span></a>
        </li>
        <hr class="sidebar-divider">

        {#        <div class="sidebar-heading">#}
        {#            USER#}
        {#        </div>#}
        {#        <li class="nav-item">#}
        {#            <a class="nav-link collapsed" href="#">#}
        {#                <i class="far fa-fw fa-window-maximize"></i>#}
        {#                <span>Profile</span>#}
        {#            </a>#}
        {#        </li>#}
        {#        <hr class="sidebar-divider">#}

        <div class="sidebar-heading">
            Function
        </div>
        <li class="nav-item" value="/function?username={{ username }}">
            <a class="nav-link" href="#">
                <i class="fas fa-fw fa-table"></i>
                <span>Functions</span>
            </a>
        </li>
        {#        <li class="nav-item" value="/function/function_deploy_step_one">#}
        {#            <a class="nav-link" href="#">#}
        {#                <i class="fas fa-fw fa-palette"></i>#}
        {#                <span>Function Deploy</span>#}
        {#            </a>#}
        {#        </li>#}
        <hr class="sidebar-divider">
    </ul>

    <!-- content-wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- content -->
        <div id="content">

            <!-- TopBar -->
            <nav class="navbar navbar-expand navbar-light bg-navbar topbar mb-4 static-top">
                <button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                           data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                             aria-labelledby="searchDropdown">
                            <form class="navbar-search">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light border-1 small"
                                           placeholder="What do you want to look for?"
                                           aria-label="Search" aria-describedby="basic-addon2"
                                           style="border-color: #3f51b5;">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>
{#                    <li class="nav-item dropdown no-arrow mx-1">#}
{#                        <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"#}
{#                           data-toggle="dropdown"#}
{#                           aria-haspopup="true" aria-expanded="false">#}
{#                            <i class="fas fa-bell fa-fw"></i>#}
{#                            <span class="badge badge-danger badge-counter">3+</span>#}
{#                        </a>#}
{#                        <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"#}
{#                             aria-labelledby="alertsDropdown">#}
{#                            <h6 class="dropdown-header">#}
{#                                Alerts Center#}
{#                            </h6>#}
{#                            <a class="dropdown-item d-flex align-items-center" href="#">#}
{#                                <div class="mr-3">#}
{#                                    <div class="icon-circle bg-primary">#}
{#                                        <i class="fas fa-file-alt text-white"></i>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div>#}
{#                                    <div class="small text-gray-500">December 12, 2019</div>#}
{#                                    <span class="font-weight-bold">A new monthly report is ready to download!</span>#}
{#                                </div>#}
{#                            </a>#}
{#                            <a class="dropdown-item d-flex align-items-center" href="#">#}
{#                                <div class="mr-3">#}
{#                                    <div class="icon-circle bg-success">#}
{#                                        <i class="fas fa-donate text-white"></i>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div>#}
{#                                    <div class="small text-gray-500">December 7, 2019</div>#}
{#                                    $290.29 has been deposited into your account!#}
{#                                </div>#}
{#                            </a>#}
{#                            <a class="dropdown-item d-flex align-items-center" href="#">#}
{#                                <div class="mr-3">#}
{#                                    <div class="icon-circle bg-warning">#}
{#                                        <i class="fas fa-exclamation-triangle text-white"></i>#}
{#                                    </div>#}
{#                                </div>#}
{#                                <div>#}
{#                                    <div class="small text-gray-500">December 2, 2019</div>#}
{#                                    Spending Alert: We've noticed unusually high spending for your account.#}
{#                                </div>#}
{#                            </a>#}
{#                            <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>#}
{#                        </div>#}
{#                    </li>#}
{#                    <li class="nav-item dropdown no-arrow mx-1">#}
{#                        <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"#}
{#                           data-toggle="dropdown"#}
{#                           aria-haspopup="true" aria-expanded="false">#}
{#                            <i class="fas fa-envelope fa-fw"></i>#}
{#                            <span class="badge badge-warning badge-counter">2</span>#}
{#                        </a>#}
{#                        <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"#}
{#                             aria-labelledby="messagesDropdown">#}
{#                            <h6 class="dropdown-header">#}
{#                                Message Center#}
{#                            </h6>#}
{#                            <a class="dropdown-item d-flex align-items-center" href="#">#}
{#                                <div class="dropdown-list-image mr-3">#}
{#                                    <img class="rounded-circle" src="/static/img/man.png" style="max-width: 60px"#}
{#                                         alt="">#}
{#                                    <div class="status-indicator bg-success"></div>#}
{#                                </div>#}
{#                                <div class="font-weight-bold">#}
{#                                    <div class="text-truncate">Hi there! I am wondering if you can help me with a#}
{#                                        problem I've been#}
{#                                        having.#}
{#                                    </div>#}
{#                                    <div class="small text-gray-500">Udin Cilok · 58m</div>#}
{#                                </div>#}
{#                            </a>#}
{#                            <a class="dropdown-item d-flex align-items-center" href="#">#}
{#                                <div class="dropdown-list-image mr-3">#}
{#                                    <img class="rounded-circle" src="/static/img/girl.png" style="max-width: 60px"#}
{#                                         alt="">#}
{#                                    <div class="status-indicator bg-default"></div>#}
{#                                </div>#}
{#                                <div>#}
{#                                    <div class="text-truncate">Am I a good boy? The reason I ask is because someone told#}
{#                                        me that people#}
{#                                        say this to all dogs, even if they aren't good.#}
{#                                    </div>#}
{#                                    <div class="small text-gray-500">Jaenab · 2w</div>#}
{#                                </div>#}
{#                            </a>#}
{#                            <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>#}
{#                        </div>#}
{#                    </li>#}
                    <li class="nav-item dropdown no-arrow mx-1">
                        <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
                           data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-tasks fa-fw"></i>
                            <span class="badge badge-success badge-counter">3</span>
                        </a>
                        <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="messagesDropdown">
                            <h6 class="dropdown-header">
                                Task
                            </h6>
                            <a class="dropdown-item align-items-center" href="#">
                                <div class="mb-3">
                                    <div class="small text-gray-500">Design Button
                                        <div class="small float-right"><b>50%</b></div>
                                    </div>
                                    <div class="progress" style="height: 12px;">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 50%"
                                             aria-valuenow="50"
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                            <a class="dropdown-item align-items-center" href="#">
                                <div class="mb-3">
                                    <div class="small text-gray-500">Make Beautiful Transitions
                                        <div class="small float-right"><b>30%</b></div>
                                    </div>
                                    <div class="progress" style="height: 12px;">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 30%"
                                             aria-valuenow="30"
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                            <a class="dropdown-item align-items-center" href="#">
                                <div class="mb-3">
                                    <div class="small text-gray-500">Create Pie Chart
                                        <div class="small float-right"><b>75%</b></div>
                                    </div>
                                    <div class="progress" style="height: 12px;">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%"
                                             aria-valuenow="75"
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                            <a class="dropdown-item text-center small text-gray-500" href="#">View All Taks</a>
                        </div>
                    </li>
                    <div class="topbar-divider d-none d-sm-block"></div>
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">
                            <img class="img-profile rounded-circle" src="/static/img/boy.png" style="max-width: 60px">
                            <span class="ml-2 d-none d-lg-inline text-white small">{{ username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="userDropdown">
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                Profile
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                Settings
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                Activity Log
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:void(0);" data-toggle="modal"
                               data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                Logout
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>

            <!-- Container Fluid-->
            <div class="container-fluid" id="container-wrapper">
                <iframe name="miframe" width="100%" height=1000px seamless frameborder=0 marginwidth=0 marginheight=0
                        scrolling="yes"
                        src='/function/get_dashboard_for_special_function_page?username={{ username }}&selected_function_name='></iframe>
                <!-- Modal Logout -->
                <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabelLogout"
                     aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabelLogout">Confirm</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure you want to logout?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel
                                </button>
                                {#                                <a href="/" class="btn btn-primary">Logout</a>#}
                                <button type="button" class="btn btn-primary" onclick="user_logout()">Logout</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <!-- Footer -->
{#        <footer class="sticky-footer bg-white">#}
{#            <div class="container my-auto">#}
{#                <div class="copyright text-center my-auto">#}
{#            <span>copyright &copy; <script> document.write(new Date().getFullYear()); </script> - developed by#}
{#              <b><a href="#" target="_blank">{{ username }}</a></b>#}
{#            </span>#}
{#                </div>#}
{#            </div>#}
{#        </footer>#}
    </div>


</div>

<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>


<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/ruang-admin.min.js"></script>
<script src="/static/vendor/chart.js/Chart.min.js"></script>
<script src="/static/js/demo/chart-area-demo.js"></script>
</body>

</html>